<template>
	<view class="px-[20rpx]">
		<view class="bg-white rounded-[20rpx] px-[20rpx]  mt-[20rpx]">
			<!-- <view class="pt-[40rpx] px-[0rpx] types">
				请输入新的手机号
			</view> -->
			<uv-form labelPosition="left" :model="user" labelWidth="170rpx" :rules="rules" ref="form1">
				<uv-form-item label="原密码"  prop="oldPasword">
					<view class="py-[10rpx]">
						<up--input v-model.trim="user.oldPasword" password show border="none"
							style="background-color: white;" placeholder="请输入原密码">
						</up--input>
					</view>
				</uv-form-item>
				<view class="oneboder">
					
				</view>
				<uv-form-item label="新密码"  prop="payPassword">
					<view class="py-[10rpx]">
						<up--input v-model.trim="user.payPassword" password show border="none"
							style="background-color: white;" placeholder="请输入新密码">
						</up--input>
					</view>
				</uv-form-item>
				<view class="oneboder">
					
				</view>
				<uv-form-item label="确认密码"  prop="confirmPassword">
					<view class="py-[10rpx]">
						<up--input v-model.trim="user.confirmPassword" password show border="none"
							style="background-color: white;" placeholder="请确认新密码">
						</up--input>
					</view>
				</uv-form-item>
				<view class="oneboder">
					
				</view>
			</uv-form>
			<view @click="showpassword()" class="typew">
				忘记原密码？
			</view>
		</view>
		<view class="py-[20rpx] px-[20rpx] w-full fixed left-0 bottom-[20rpx] box-border">
			<up-button @click="sendData" :customStyle="{borderRadius:'20rpx',height:'98rpx'}" color="#FE861C">
				确认
			</up-button>
		</view>

		<u-modal :show="showtan" :title="Modaltitle" :content='Modalcontent + phone' :showCancelButton='true'
			@confirm='confirm()' @cancel='cancel()'></u-modal>

	</view>
</template>

<script setup>
	import "./inputcss.scss"
	import Md5 from "js-md5"
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		forgotpassword,
		paypass,
		getCode
	} from '@/api/my.js'
	import {
		ref,
		reactive,
		onMounted,
	} from 'vue'
	import {
		MD5
	} from "crypto-js";
	let phone = ref()
	onLoad((e) => {
		phone.value = e.phone
		console.log("phone", e);
	})
	const form1 = ref(null)
	// 忘记密码
	let showtan = ref(false)
	let showpassword = () => {
		showtan.value = true
	}
	let Modaltitle = ref('发送验证码')
	let Modalcontent = ref('通过短信验证码重置支付密码，是否发送验证码到') //通过短信验证码重置支付密码，是否发送验证码到1341904847?
	let cancel = () => {
		showtan.value = false
	}
	const rules = {
		confirmPassword: {
			type: 'number',
			max: 6,
			required: true,
			message: '请输入6为数字的密码',
			trigger: ['blur', 'change']
		},
		payPassword: {
			type: 'number',
			max: 6,
			required: true,
			message: '请输入6为数字的密码',
			trigger: ['blur', 'change']
		},
		oldPasword: {
			type: 'number',
			max: 6,
			required: true,
			message: '请输入6为数字的密码',
			trigger: ['blur', 'change']
		}
	}
	let confirm = () => {
		getCode({
			phone: phone.value,
			msgType: 2,
		}).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title:"发送成功",
					icon: 'none',
					duration: 1000
				});
				setTimeout(() => {
					uni.navigateTo({
						url: '/page_my/myInfo/sendCode/sendCode?phone=' + phone.value
					})
				}, 500)

			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none',
					duration: 1000
				});
			}
		})
		showtan.value = false
	}

	let user = reactive({
		oldPasword: '',
		payPassword: '',
		confirmPassword: '',
	})
	let sendData = () => {
		form1.value.validate().then(res => {
			paypass({
				payPassword: Md5(user.payPassword),
				confirmPassword: Md5(user.confirmPassword),
				oldPassword: Md5(user.oldPasword)
			}).then(res => {
				uni.showToast({
					title: res.msg,
					icon: 'none',
				});
				setTimeout(()=>{
					uni.navigateBack()
				},1000)
			}).catch(err => {
				uni.showToast({
					title: err,
					icon: 'none',
				});
			})

		}).catch(errors => {
			uni.showToast({
				icon: 'none',
				title: '校验失败' 
			})
		})
		// console.log("发送短信")

	}
</script>

<style lang="scss" scoped>
	.typew {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #2A7AFF;
		padding: 30rpx 0;
	}

	.types {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #1A1B1C;
	}

	.typess {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #1A1B1C;
	}
	.oneboder{
			   border-bottom: 1px solid #efefef;
			   transform: scaleY(.5);
	}
</style>